<template>
    <div id="loginPage">
        <el-form
                ref="loginForm"
                :rules="rules"
                :model="user"
                class="loginForm"
        >
            <el-form-item >
                <h1 style="width:100%;text-align: center;">客服系统</h1>
            </el-form-item>
            <el-form-item prop="username" >
                <el-input  :prefix-icon="User" placeholder="请输入用户名" class="loginItem"  v-model="user.username" />
            </el-form-item>
            <el-form-item prop="password">
                <el-input :prefix-icon="Key"  placeholder="请输入密码" class="loginItem"  show-password  v-model="user.password" />
            </el-form-item>
            <el-form-item prop="captcha">
                <el-input :prefix-icon="Lock"  placeholder="请输入验证码" class="loginItem" style="width: calc(100% - 120px)" v-model="user.captcha" />
                <el-image style="width: 110px; height: 36px;margin-left: 10px;border-radius: 5px" :src="captchaUrl" fit="fill" @click="getNewCaptcha"/>
            </el-form-item>
            <el-form-item>
                <el-button class="loginItem" style="width: 100%;" type="primary"  @click="login">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    import {reactive, ref, onMounted } from 'vue'
    import router from '@/router'
    import {User, Key, Lock } from '@element-plus/icons-vue'

    const loginForm = ref();
    let captchaUrl = ref("/api/kaptcha")
    const rules = reactive({
        username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
            { required: true,message: '请输入密码', trigger: 'blur',},
        ],
        captcha: [
            { required: true,message: '请输入验证码', trigger: 'blur',},
        ],
    })
    // const router = useRouter()
    const user = reactive({
        username: 'youbug',
        password: '111111',
    })
    onMounted(function () {

    })

    function login() {
        loginForm.value.validate((valid, fields)=>{
            if(valid){
                request.post("/api/login", user).then(resp => {
                    sessionStorage.setItem("user",JSON.stringify(resp.user))
                    sessionStorage.setItem("menus",JSON.stringify(resp.menu))
                    ElMessage({message: '登录成功！',type: 'success'})
                    router.addMyRoute(resp.menu)
                    router.push("/main")
                });
            }else{
                ElMessage({message: '缺少必填项！',type: 'error'})
            }
        })
    }
    function getNewCaptcha() {
        captchaUrl.value = captchaUrl.value+"?"+(new Date()).getTime()
    }
</script>
<style scoped>
    .loginItem{
        height:40px;
        font-size: 16px;
    }
    #loginPage{
        height: 100vh;
        width: 100vw;
        background-image: url("../assets/bg.jpg") ;
        background-position: center center;
        /* 背景图不平铺 */
        background-repeat: no-repeat;
        /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
        background-attachment: fixed;
        /* 让背景图基于容器大小伸缩 */
        background-size: cover;
    }
    .loginForm:not(.loginItem){
        position:absolute;
        background-color: #fefefe;
        border-radius: 10px;
        top:50%;
        left:50%;
        padding:15px;
        margin-top:-200px;
        margin-left:-175px;
        width: 350px;
    }
</style>